<template>
    <div
        class="adv-pop-bg"
        v-if="isShow"
    >
        <img
            class="adv-img"
            @click="goExperience"
            src="@/assets/images/home/home-pop-img.png"
        />
        <img
            class="adv-pop-close"
            @click="isShow = false"
            src="@/assets/images/home/home-pop-close.png"
        />
    </div>
</template>

<script>
export default {
    name: 'AdvPop',
    data() {
        return {
            isShow: true
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            const vipNum = JSON.parse(sessionStorage.getItem('userInfo')).vip
            if (vipNum == 0) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        },
        goExperience() {
            this.isShow = false
            this.$router.push('/experience')
        }
    }
}
</script>

<style lang="stylus" scoped>
.adv-pop-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    overflow hidden
    z-index 9
    display flex
    flex-direction column
    align-items center
    justify-content center
    .adv-img
        width 80%
    .adv-pop-close
        width 1rem
        height 1rem
        margin-top 0.3rem
</style>

